<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import * as echarts from 'echarts';

const pageTabsNav = ['按时间统计','按入炉位置统计','按取煤位置统计']
const pageTabsIndex = ref(0)

async function clickPageTabs(index:number){
    pageTabsIndex.value = index
    resetForm(searchFormRef.value)
    if(pageTabsIndex.value == 0)
    {
        getFurnaceInStaticByDate()
    }
    else if(pageTabsIndex.value == 1){
        // initChart(
        //     '',
        //     ['1#A','1#B','1#C','1#E','1#F','2#A','2#C','2#C','2#F'],
        //     '入炉重量',
        //     [4000,5000,4500,3000,4200,4800,5320,4000,5000],   
        //     '',
        //     []
        // )
        dateTypePosit.value = 3
        getFurnaceInStaticByPosition()
    }
    else if(pageTabsIndex.value == 2){
        dateTypePosit.value = 4
    }
}

const timeTabsNav = ['近12个月','近30天']
const timeTabsIndex = ref(0)
function clickTimeTabs(index:number){
    timeTabsIndex.value = index
    if(index == 0){
        dateType.value = 1
        timeData.value = [yearAgo,today]
    }
    else if(index == 1){
        dateType.value = 2
        timeData.value = [monthAgo,today]
    }
    getFurnaceInStaticByDate()

}

//图表初始化
function initChart(title?:string,xData?: string[],barDataName?:string,barData?: number[],lineDataName?:string,lineData?: number[],){
    //const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    //const yData = [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200]
    const barChart = echarts.init(document.getElementById('statsChart'));
    // 绘制图表
    barChart.setOption({
        title: {
            text: title,
            left: 'center',
            top: '3%'
        },
        grid: {
            left: '8%',
            top: '15%',
            right: '8%',
            bottom: '6%'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '3%',
            right: '1%',
            data: [barDataName, lineDataName]
        },
        xAxis: [
            {
                type: 'category',
                data: xData,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 100
            },
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 100
            }
        ],
        series: [
            {
                name: barDataName,
                type: 'bar',
                tooltip: {},
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#317DF7'
                        },
                        {
                            offset: 1,
                            color: '#88B4FA'
                        }
                    ])
                },
                data: barData
            },
            {
                name: lineDataName,
                type: 'line',
                yAxisIndex: 1,
                tooltip: {},
                colro:['#F49F17'],
                itemStyle: {
                    color: '#F49F17'
                },
                data: lineData
            }
        ]
    });
}


const monthVal = ref('')

// 获取当天日期
const timeDate = new Date();
const today = timeDate.toISOString().split('T')[0]

// 获取一个月前的日期
const oneMonthAgo = new Date();
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
const monthAgo = oneMonthAgo.toISOString().split('T')[0];

// 获取一年前的日期
const oneYearAgo = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
oneYearAgo.setMonth(oneYearAgo.getMonth() + 1);
const yearAgo = oneYearAgo.toISOString().split('T')[0];


// api
import { FurnaceInStaticByDate, FurnaceInStaticByPosition, DictDataType, FurnaceMsgListByDicCode, AllFuelTypeList, GetAllBunkerData, AreaByBunkerId } from "@/api";

const cData = ref<any>([])


// 按时间
const listTableData = ref<any>({}) 
const dateType = ref(1)
const timeData = ref([yearAgo,today])
const cTableData = ref<any>([])
const getFurnaceInStaticByDate = () => {
    FurnaceInStaticByDate({
        timeData: timeData.value,
        dateType: dateType.value,
    }).then( (res:any) =>{
        console.log('list-------',res.data)
        listTableData.value = res.data
        initChart('入炉煤量统计', listTableData.value.timeData, '入炉煤量', listTableData.value.actureBunkerData, '与上年同期对比', listTableData.value.planBunkerData)

        cTableData.value = []
        for (const i in listTableData.value.timeData) {
            let element = {
                timeData: listTableData.value.timeData[i],
                actureBunkerData: listTableData.value.actureBunkerData[i],
                planBunkerData: listTableData.value.planBunkerData[i],
                bunkerPercentData: listTableData.value.bunkerPercentData[i]
            }
            cTableData.value.push(element)
        }

    })
}

// 搜索
const dateTypePosit = ref(3)
const searchForm = ref({
    dateType: dateTypePosit.value,
    FurnaceCode: "", //锅炉编码
    PositionCode: null, //入炉位置(原煤仓编码)
    BeginInStartTime: null, //入炉开始时间
    EndInStartTime: null, //入炉结束时间
    OutFtId: null, //取煤煤种id
    BunkerId: null, //取煤方向
    FaId: null, //取煤区域

    timeData: [],

})

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    searchForm.value.BeginInStartTime = null
    searchForm.value.EndInStartTime = null
    formEl.resetFields()
    getFurnaceInStaticByPosition()
}

// 按入炉位置
const PositionData = ref<any>([])
const getFurnaceInStaticByPosition = () => {
    FurnaceInStaticByPosition(searchForm.value).then( (res:any) =>{
        console.log('PositionData-------',res.data)
        PositionData.value = res.data
        initChart(
            '',
            PositionData.value.inPosition,
            '入炉重量',
            PositionData.value.furnaceWeights, 
            '',
            []
        )

    })
}





// 锅炉-下拉框数据
const bunkerNameData = ref<any>([])
const getDictDataType = () => {
    DictDataType('boiler_info').then(res=>{
        //console.log('字典----',res.data)
        bunkerNameData.value = res.data
    })
}
const changeFurnaceCode = () => {
    searchForm.value.PositionCode = null
    getFurnaceMsgListByDicCode(searchForm.value.FurnaceCode)
}

// 锅炉位置-下拉框数据
const FurnaceByDicCodeData = ref<any>([])
const getFurnaceMsgListByDicCode = (code:any) => {
    FurnaceMsgListByDicCode(code).then(res=>{
        //console.log('字典----入炉位置',res.data)
        FurnaceByDicCodeData.value = res.data
    })
}

// 煤炭种类-下拉框数据
const FuelTypeData = ref<any>([])
const getAllFuelTypeList = () => {
    AllFuelTypeList().then(res=>{
       // console.log('字典----煤炭种类',res.data)
        FuelTypeData.value = res.data
    })
}

// 取煤方向-下拉框数据
const BunkerData = ref<any>([])
const AllBunkerData = () => {
    GetAllBunkerData().then(res=>{
        //console.log('字典----取煤方向',res.data)
        BunkerData.value = res.data
    })
}

// 取煤区域-下拉框数据
const AreaBunkerData = ref<any>([])
const getAreaByBunkerId = (id:any) => {
    AreaByBunkerId(id).then(res=>{
        //console.log('字典----取煤区域',res.data)
        AreaBunkerData.value = res.data
    })
}
const changeBunkerId = () => {
    searchForm.value.FaId = null
    getAreaByBunkerId(searchForm.value.BunkerId)
}




onMounted(() => {
    getFurnaceInStaticByDate()
    getDictDataType()
    getAllFuelTypeList()
    AllBunkerData()
    getFurnaceInStaticByPosition()
});
</script>
<template>
<div class="flex_bg">
    <ul class="page_tabs">
        <li v-for="(item,index) in pageTabsNav" @click="clickPageTabs(index)" :class="pageTabsIndex == index?'hover':''">{{ item }}</li>
    </ul>
    <div style="position: relative;">
        <ul class="time_tabs" v-if="pageTabsIndex == 0">
            <li v-for="(item,index) in timeTabsNav" @click="clickTimeTabs(index)" :class="timeTabsIndex == index?'hover':''">{{ item }}</li>
        </ul>
        <div class="date_month" v-if="pageTabsIndex == 1">
            <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="chart_search_inline" label-width="75">
                <el-form-item label="入炉名称:" prop="FurnaceCode">
                    <el-select v-model="searchForm.FurnaceCode" placeholder="请选择" @change="changeFurnaceCode"  style="width: 130px;">
                        <el-option v-for="item in bunkerNameData" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入炉位置:" prop="PositionCode">
                    <el-select v-model="searchForm.PositionCode" placeholder="请选择" style="width: 100px;">
                        <el-option v-for="item in FurnaceByDicCodeData" :label="item.furnaceName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入炉时间:" prop="timeData">
                    <el-date-picker style="width: 240px;" v-model="searchForm.timeData" 
                    type="daterange" 
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间" 
                     />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#2565C8" @click="getFurnaceInStaticByPosition()">搜索</el-button>
                    <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                        <el-icon size="20">
                            <Refresh />
                        </el-icon>
                    </el-button>
                    <el-button type="primary" color="#2565C8">打印</el-button>
                    <el-button type="primary" color="#2565C8">导出</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 时间/入炉位置 图表 -->
        <div v-if="pageTabsIndex == 0||pageTabsIndex == 1" class="chart_main" id="statsChart"></div>
    </div>

    <!-- 按时间统计 -->
    <div v-if="pageTabsIndex == 0" class="table_info mt15">
        <table>
            <tr>
                <th>日期</th>
                <th>计划来煤(万吨)</th>
                <th>实际来煤(万吨)</th>
                <th>去年同期增加</th>
            </tr>
            <tr v-for="item in cTableData">
                <th>{{ item.timeData }}</th>
                <td>{{ item.planBunkerData }}</td>
                <td>{{ item.actureBunkerData }}</td>
                <td>
                    <p v-if="parseFloat(item.bunkerPercentData.replace('%', '')) > 0" class="red">{{ item.bunkerPercentData }}</p>
                    <p v-else-if="parseFloat(item.bunkerPercentData.replace('%', '')) < 0" class="green">{{ item.bunkerPercentData }}</p>
                    <p v-else >{{ item.bunkerPercentData }}</p>
                </td>
            </tr>

        </table>
    </div>

    <!-- 按入炉位置统计 -->
    <div v-if="pageTabsIndex == 1" class="table_info mt15">
        <table>
            <tr>
                <!-- <th>取煤方向</th>
                <th>作业班组</th>
                <th>取煤位置</th>
                <th>入炉名称</th> -->
                <th>入炉位置</th>
                <!-- <th>煤种</th> -->
                <th>入炉重量</th>
                <th>入炉开始时间</th>
                <th>入炉结束时间</th>
            </tr>
            <tr v-for="(item,index) in PositionData.positionDatas" :key="index">
                <td>{{ item.positionName }}</td>
                <td>{{ item.weight }}</td>
                <td>{{ item.startTime }}</td>
                <td>{{ item.endTime }}</td>
            </tr>
            <!-- <tr>
                <td rowspan="6">1#煤场</td>
                <td rowspan="6">A班</td>
                <td rowspan="3">1#煤场A区</td>
                <td rowspan="2">1#锅炉</td>
                <td>1A</td>
                <td>褐煤</td>
                <td>3578</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>2#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td rowspan="3">2#锅炉B区</td>
                <td rowspan="2">1#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>2#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr> -->
        </table>
    </div>

    <!-- 按取煤位置统计 -->
    <div v-if="pageTabsIndex == 2" class="table_info mt15">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="chart_search_inline" label-width="75">
            <el-form-item label="取煤方向:" prop="BunkerId">
                <el-select v-model="searchForm.BunkerId" placeholder="请选择" @change="changeBunkerId" style="width: 100px;">
                    <el-option v-for="item in BunkerData" :label="item.bunkerName" :value="item.bunkerId" />
                </el-select>
            </el-form-item>
            <el-form-item label="取煤区域:" prop="FaId">
                <el-select v-model="searchForm.FaId" placeholder="请选择" style="width: 100px;">
                    <el-option v-for="item in AreaBunkerData" :label="item.areaName" :value="item.fid" />
                </el-select>
            </el-form-item>
            <el-form-item label="取煤时间:" prop="timeData">
                <el-date-picker style="width: 240px;"
                    v-model="searchForm.timeData"
                    type="daterange"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间" 
                />
            </el-form-item>
            <el-form-item label="取煤煤种:" prop="OutFtId" >
                <el-select v-model="searchForm.OutFtId" placeholder="请选择" style="width: 100px;">
                    <el-option v-for="item in FuelTypeData" :label="item.ftName" :value="item.ftId" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="getFurnaceInStaticByPosition()">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
                <el-button type="primary" color="#2565C8">打印</el-button>
                <el-button type="primary" color="#2565C8">导出</el-button>
            </el-form-item>
        </el-form>
        <table>
            <tr>
                <!-- <th>取煤方向</th>
                <th>作业班组</th>
                <th>取煤位置</th>
                <th>入炉名称</th> -->
                <th>入炉位置</th>
                <!-- <th>煤种</th> -->
                <th>入炉重量</th>
                <th>入炉开始时间</th>
                <th>入炉结束时间</th>
            </tr>
            <tr v-for="(item,index) in PositionData.positionDatas" :key="index">
                <td>{{ item.positionName }}</td>
                <td>{{ item.weight }}</td>
                <td>{{ item.startTime }}</td>
                <td>{{ item.endTime }}</td>
            </tr>
            <!-- <tr>
                <td rowspan="6">1#煤场</td>
                <td rowspan="6">A班</td>
                <td rowspan="3">1#煤场A区</td>
                <td rowspan="2">1#锅炉</td>
                <td>1A</td>
                <td>褐煤</td>
                <td>3578</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>2#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td rowspan="3">2#锅炉B区</td>
                <td rowspan="2">1#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>2#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td rowspan="6">1#煤场</td>
                <td rowspan="6">A班</td>
                <td rowspan="3">1#煤场A区</td>
                <td rowspan="2">1#锅炉</td>
                <td>1A</td>
                <td>褐煤</td>
                <td>3578</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>2#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td rowspan="3">2#锅炉B区</td>
                <td rowspan="2">1#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr>
            <tr>
                <td>2#锅炉</td>
                <td>1C</td>
                <td>贫煤</td>
                <td>2839</td>
                <td>2023-06-22  16:00:00</td>
                <td>2023-06-22  16:00:00</td>
            </tr> -->
        </table>
    </div>

</div>
</template>
<style scoped lang="scss">

.chart_main{
    width: 100%;
    height: 500px;
    padding-top: 5px;
}
.date_month{
    position: absolute;
    left: 20px;
    top:15px;
    z-index: 9;
}
.time_tabs{
    position: absolute;
    left: 20px;
    top:15px;
    z-index: 9;
    display: flex;
    align-items: center;
    li {
        width: 100px;
        line-height: 32px;
        text-align: center;
        background: url('../../assets/img/ico_btn1.png') no-repeat;
        background-size: 100% 100%;
        font-weight: 400;
        font-size: 15px;
        color: #2565C8;
        cursor: pointer;
        border-radius: 20px;
        margin-right: 10px;

        &:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        &.hover {
            background: url('../../assets/img/ico_btn1a.png') no-repeat;
            background-size: 100% 100%;
            color: #fff;
        }
    }
}
.page_tabs{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 2px solid #E0E5ED;
    height: 60px;
    margin-top: -10px;
    li{
        font-weight: bold;
        font-size: 18px;
        color: #3D4755;
        line-height: 60px;
        position: relative;
        padding:0 20px;
        flex-shrink: 0;
        margin-right: 20px;
        cursor: pointer;
        &.hover::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            border-bottom: 3px solid #2565C8;
        }
    }
}
</style>